<!DOCTYPE html>
<html>
<head>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title>将原生事件绑定到组件</title>
</head>
<body>
<div id="app1">
	<child @click="handleClick">第一种</child>
	<!-- .native 修饰符的官方解释是： 监听组件根元素的原生事件！ -->
	<child @click.native="handleClick">第二种</child>
	<child-a @click-a="handleClick"> 第三种</child-a>
	<child-b @click="handleClick"> 第四种</child-b>
</div>
</body>
</html>

<script type="text/javascript">
Vue.component('child', {
  template: '<button>click me</button>'
})
Vue.component('child-a', {
  template: '<button @click="click">click me </button>',
  methods: {
    click () {
      this.$emit('click-a', 'i from child...')
    }
  }
})

Vue.component('child-b',{
	template:'<button v-on="$listeners">click on $listeners</button>'
})

new Vue({
  el: '#app1',
  methods: {
    handleClick () {
      alert('hello,world!')
    }
  }
})

</script>
<style type="text/css">
	
</style>